import type { CompanyInfoDto, GroupInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Prop } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import { getKeyToEnum, InsuranceAuditStatusCnEnum } from '@/const/enum'

import { getWesureAuditList } from '@/api/insurance/daily'
import type { TagType } from '@/api/types'
import type { WesureAuditDto } from '@/api/insurance/daily/types'

import PreviewVideoOrImage from '@/components/preview-media/PreviewVideoOrImage'
import { Tag } from 'ant-design-vue'

@Component
export class InsuranceCheck extends TableRender {
    @Prop() basicData!: GroupInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    noTablePadding = true
    noFilterPadding = true
    filterTheme = 'light'

    showVideoDialog = false
    curItem = {}
    videoList = [] as string[]

    filterConfig() {
        return {
            serveCompanyName: {
                name: '派遣单位',
                element: 'input',
                span: 24
            },
            auditStatus: {
                name: '保险状态',
                element: 'radioGroup',
                span: 24,
                options: getKeyToEnum(InsuranceAuditStatusCnEnum, true)
            }
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '客户名',
            width: 180
        },
        {
            field: 'serveCompanyName',
            title: '派遣单位',
            width: 180
        },
        {
            field: 'auditStatus',
            title: '审批状态',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    const map = {
                        1: 'primary',
                        2: 'danger',
                        3: 'info'
                    }
                    return (
                        <Tag color={map[row.auditStatus as keyof typeof map] as TagType}>
                            {InsuranceAuditStatusCnEnum[row.auditStatus]}
                        </Tag>
                    )
                }
            }
        },
        {
            field: 'contacts',
            title: '负责人'
        },
        {
            field: 'phone',
            title: '手机号',
            width: 110
        },
        {
            field: 'fileDetailList',
            title: '图片视频',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return <PreviewVideoOrImage src={row.params?.file} />
                }
            }
        },
        {
            field: 'industryName',
            title: '行业名称',
            formatter: ({row}) => {
                return row?.dailyInfo?.industryName
            }
        },
        {
            field: 'area',
            title: '地区'
        }
    ] as TableRenderColumnTypes<WesureAuditDto>

    onShowVideo(list: string[]) {
        this.videoList = list
        this.showVideoDialog = true
    }

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.basicData?.companyId) return []
        return getWesureAuditList({
            companyId: this.basicData.companyId,
            productType: 1,
            insureCompanyType: 'insure002_gsc',
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <>
                <div class="bg-white-dark-100 text-base px-12px py-8px mb-12px">投保审核</div>
                <div>{super.render()}</div>
            </>
        )
    }
}

export default toNative<
    { basicData: GroupInfoDto; companyBasicInfo: CompanyInfoDto },
    { refresh: () => void }
        >(InsuranceCheck)
